<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-task-type</title>
	<meta charset="UTF-8">
	
	<link rel="stylesheet" href="${basePath }/colorpicker/css/colorpicker.css" type="text/css" />
    <link href="${basePath }/css/application-766336123a9b61bedf26182718c02860.css" media="all" rel="stylesheet" type="text/css">
	
	<link type="text/css" rel="stylesheet" href="${basePath }/css/capture.css">
	<script type="text/javascript" src="${basePath }/colorpicker/js/jquery.js"></script>
	<script src="${basePath }/js/application-e8369d8531953caeeedd0118548cdc1c.js" type="text/javascript"></script>
	<script type="text/javascript" src="${basePath }/js/date.js"></script>
	<script type="text/javascript" type="text/javascript" src="${basePath}/My97DatePicker/WdatePicker.js"></script>
		
	
    <link rel="stylesheet" media="screen" type="text/css" href="${basePath }/colorpicker/css/layout.css" />
	<script type="text/javascript" src="${basePath }/colorpicker/js/colorpicker.js"></script>
    <script type="text/javascript" src="${basePath }/colorpicker/js/eye.js"></script>
    <script type="text/javascript" src="${basePath }/colorpicker/js/utils.js"></script>
    <script type="text/javascript" src="${basePath }/colorpicker/js/layout.js?ver=1.0.2"></script>
    
	
</head>

<body class="crm">
	
<jsp:include page="../include/top.jsp">
	<jsp:param value="task" name="tag"/>
</jsp:include>


<div class="container-fluid">
	<div class="row-fluid" align="center" style="margin-top:70px;">
	<div class="span8 offset2" style="margin-left: 15%">
	<div class="well screen">
		<div class="page-header header" align="left">
			机会分类
		</div>
		<div class="main">
						
		<p>修改分类会影响到同事们的机会。比如，如果您将“设计”改为“LOGO设计”，所有分类为“设计”的机会都将改为“LOGO设计”。 请确认您的修改会通知到所有同事。</p>
		
		<div class="new" align="left">
			<!-- <form accept-charset="UTF-8" action="${basePath }/task/addtype" onsubmit="return false" class="well form-inline" data-remote="true" id="category_form" method="post"> -->
			<div class="well form-inline">
				<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
				<input name="authenticity_token" type="hidden" value="/rIOYHDkRwrlZ6mZ5hPj5Gx10MdoQrv7WwMkK5BNWfw="></div>
				<input type="hidden" value="settings" name="from">
				<input type="hidden" value="ChanceCategory" name="type">
				<input name="tasktype.type" placeholder="添加一个任务分类..." style="height:25px;">
				<button type="submit" class="btn" id="add-type" disabled="disabled">添加</button>
				<img id="indicator" src="${basePath }/img/indicator.gif" style="display:none">
			</div>
			<!-- </form>-->
		</div>
		

		<table class="table" id="tasktype">
			<tbody>
			
			<tr id="type-list"></tr>		
			<c:forEach items="${tasktypeList }" var="tasktype">
			<tr id="tasktype-${tasktype.id }">
				<td width="45px">
					
					<div class="colorSelector">
						<div style="background-color: #${tasktype.color}" id="${tasktype.id }" onclick="getid(this)"></div>
					</div>
					
				</td>
				<td style="font-size:14px">
					<div class="edit" style="display:none">
						<!-- <form accept-charset="UTF-8" action="${basePath }/task/edittype" class="form-inline category-form" data-remote="true" id="edit_category" method="post"> -->
							<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="put"><input name="authenticity_token" type="hidden" value="/rIOYHDkRwrlZ6mZ5hPj5Gx10MdoQrv7WwMkK5BNWfw="></div>
							<input type="hidden" name="typeid" value="${tasktype.id }"/>
							<input id="type-${tasktype.id }" name="tasktype.type" style="height:25px;" type="text" value="${tasktype.type }">
							<input type="button" class="btn btn-primary" name="edit-type" value="保存" id="${tasktype.id }"/>
							<button class="btn cancel">取消</button>
						<!-- </form> -->		
					</div>
					<div class="show" id="show-${tasktype.id }">
						${tasktype.type }
					</div>
			
					<img alt="Indicator" class="spinner" id="operation_wait_25376" src="${basePath }/img/indicator-57b9a4bc69531739d1aefa7c33cdcd08.gif" style="height:5px;width:21px;vertical-align: middle; display: none;">
				</td>
				<td class="actions">
					<a href="" class="icon-edit" title="编辑分类名称"></a>
					<a href="javascript:;" class="icon icon-trash" rel="${tasktype.id }" data-method="delete" data-remote="true" rel="nofollow"></a>
				</td>
			</tr>
			</c:forEach>
			</tbody>
		</table>
		
		<form action="https://1339135738.workxp.info/chances/new" class="button_to" method="get">
			<div align="left">
				<a class="btn" type="button" href="${basePath }/task/list">完成编辑，返回</a>
			</div>
		</form>
		
		<script type="text/javascript">
			//deltype
			$("a[data-method='delete']").click(function(){
				if(confirm("你确定要删除这个任务类别吗？")){
					var id = $(this).attr("rel");
					$.post("${basePath}/task/deltype",{"typeid":id},function(){
						$("#tasktype-"+id).fadeOut();
					});
				}
			});
			
			
			//newtype
			$("#add-type").click(function(){
				var type = $("input[name='tasktype.type']");
				if(type.val().trim() != ""){
					$.post("${basePath}/task/addtype",{"tasktype.type":type.val().trim()},function(obj){
						if(obj.id != ""){
							var content = "";
							content += "<tr id=\"tasktype-"+obj.id+"\"><td width=\"45px\"><div class=\"colorSelector\">"+
								"<div style=\"background-color: #"+obj.color+"\" id=\""+obj.id+"\" onclick=\"getid(this)\"></div></div></td><td style=\"font-size:14px\"><div class=\"edit\" style=\"display:none\">"+
								"<div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\"><input name=\"_method\" type=\"hidden\" value=\"put\"><input name=\"authenticity_token\" type=\"hidden\" value=\"/rIOYHDkRwrlZ6mZ5hPj5Gx10MdoQrv7WwMkK5BNWfw=\"></div>"+
								"<input id=\"type-"+obj.id+"\" name=\"tasktype.type\" style=\"height:25px;\" type=\"text\" value=\""+obj.type+"\">&nbsp;"+
								"<input type=\"button\" class=\"btn btn-primary\" name=\"edit-type\" value=\"保存\" id=\""+obj.id+"\"/>&nbsp;<button class=\"btn cancel\">取消</button></div>"+
								"<div class=\"show\" id=\"show-"+obj.id+"\">"+obj.type+"</div><img alt=\"Indicator\" class=\"spinner\" id=\"operation_wait_25376\" src=\"${basePath }/img/indicator-57b9a4bc69531739d1aefa7c33cdcd08.gif\" style=\"height:5px;width:21px;vertical-align: middle; display: none;\">"+
								"</td><td class=\"actions\"><a href=\"\" class=\"icon-edit\" title=\"编辑分类名称\"></a>&nbsp;<a href=\"javascript:;\" id=\"deltype-"+obj.id+"\" class=\"icon icon-trash\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"></a></td></tr>";
							$("#type-list").after(content);
							type.attr("value","");
							$("#deltype-"+obj.id).click(function(){
								if(confirm("你确定要删除这个任务类别吗？")){
									$.post("${basePath}/task/deltype",{"typeid":obj.id},function(){
										$("#tasktype-"+obj.id).fadeOut();
									});
								}
							});
						}
					});
				}
			});
			
		
			//edittype
			$("input[name='edit-type']").click(function(){
				var id = $(this).attr("id");
				var type = $("#type-"+id).val().trim();
				if(type != ""){
					$.post("${basePath}/task/edittype",{"typeid":id,"tasktype.type":type},function(obj){
						$(".edit").slideUp();
						$(".show").slideDown();
						$("#show-"+id).text(obj.type);
					});
				}
			});
		
			
			//color
			var id = "";
			function getid(obj){
				id = $(obj).attr("id");
			}
			$(".colorSelector").ColorPicker({
				onShow: function (colpkr) {
					$(colpkr).fadeIn(500);
					return false;
				},
				onHide: function (colpkr) {
					$(colpkr).fadeOut(500);
					return false;
				},
				onChange: function (hsb, hex, rgb) {
					$.post("${basePath}/task/changeColor",{"tasktype.color":hex,"typeid":id},function(obj){
						$("#"+id).css("backgroundColor", "#" + obj.color);
					});
				}
			});
		</script>
		
		
		<script type="text/javascript" charset="utf-8">
			function toggleEditForm(tr) {
				tr.find(".edit").slideToggle();
				tr.find(".show").slideToggle();
			}
			
			$(document).ready(function() {
				
				$("#tasktype").on("click", ".icon-edit, button.cancel", function(e) {
					e.preventDefault();
					toggleEditForm($(e.target).parents("tr"));
				});
		
				
				setInterval(function() {
					var submit = $(".new :submit");
					$.trim($(".new :text").val()) == "" ? submit.attr("disabled", "disabled") : submit.removeAttr("disabled")
				}, 500);
			});
		</script>
		
		<style type="text/css" media="screen">
			a.menu_target:hover{
				text-decoration:none;
			}
			.category-form {
				margin: 0px;
			}
			div.edit_swatch {
				width:85px;
			}
			span.color_swatch {
			  border: 1px solid #CCCCCC;
			  display: inline-block;
			  height: 18px;
			  vertical-align: middle;
			  width: 50px;
			}
			div.edit_swatch a {
			  background: -moz-linear-gradient(center top , #FFFFFF 30%, #EFEFEF 100%) repeat scroll 0 0 transparent;
			  border: 1px solid #999999;
			  padding: 2px 6px 2px 7px;
			}
			div.edit_swatch a {
			  display: block;
			}
			ul.picker {
				list-style: none outside none;
			  background: url(${basePath}/img/workxp_sprites.png) no-repeat scroll -400px -420px transparent;
			  margin: -1px 0 0 !important;
			  padding: 10px 0 12px 9px !important;
			  position: absolute;
			  width: 189px;
			  z-index: 99;
			}
			ul.picker li {
			  float: left;
			  margin: 0 8px 8px 0;
			  padding: 0;
			  width: auto;
			}
			ul.picker li a, ul.picker a:hover {
			  border: medium none !important;
			  margin: 0 !important;
			  padding: 0 !important;
			}
			ul.picker li.selected {
			  border: 1px solid #333333;
			  margin: -1px 7px 7px -1px !important;
			}
			div.edit_swatch {
			  border-bottom: 1px solid #CCCCCC;
			  border-right: 1px solid #CCCCCC;
			}
		</style>

		</div>
	</div>
	</div>

	</div>
</div>
	
</body></html>
